<template>
  <div class="order">
    <div class="top_bar">
      <van-nav-bar
        title="订单列表"
        left-arrow
        @click-left="$router.push('/mine')"
      />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :offset="80"
      direction="down"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.Orderid + item.upd_time * Math.random()"
      >
        <slot>
          <van-card
            @click-thumb="clickImg(item.goods_id)"
            :num="Math.round(item.totalMoney / item.goods_price)"
            tag=""
            :price="Number(item.goods_price).toFixed(2)"
            :desc="item.cat_id ? item.cat_id : ''"
            :title="item.goods_name"
            :thumb="item.goods_small_logo"
            :origin-price="Number(item.goods_price * 1.2).toFixed(2)"
          />
          <van-cell-group>
            <van-cell
              title="订单信息"
              :value="'总价 ￥' + item.totalMoney"
              :label="
                '订单地址:' + item.Address
                  ? item.Address
                  : '' + item.AddressDetail
                  ? item.AddressDetail
                  : ''
              "
            />
          </van-cell-group>
        </slot>
      </van-cell>
    </van-list>
    <div class="backTop" @click="goTop" v-show="isShow">
      <van-icon name="back-top" style="line-height: 30px; font-weight: 700px" />
    </div>
  </div>
</template>
<script>
export default {
  name: "Order",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      isShow: false,
    };
  },
  methods: {
    onLoad() {
      const { username, token } = JSON.parse(localStorage.getItem("userInfo"));
      this.$request
        .get("/getOrder", {
          params: {
            username,
            limit: 10,
            page: this.page,
          },
          //   headers: { token: token },
        })
        .then((res) => {
          // 加载状态结束
          this.loading = true;
          res.data.data.forEach((item) => {
            this.list.push(item);
            this.loading = false;
          });
          this.page++;
          if (this.list.length >= res.data.total) {
            this.loading = true;
            this.finished = true;
          }
        });
    },
    clickImg(id) {
      this.$router.push("/goods/" + id);
    },
    goTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 300) {
        this.isShow = true;
      } else if (scrollTop < 300) {
        this.isShow = false;
      }
    },
  },
  created() {
    // this.$route.params;
  },
  mounted() {
    // 进入该组件隐藏底部bar
    window.addEventListener("scroll", this.handleScroll);
    this.$parent.isShowbar = false;
  },
  destroyed() {
    // 退出该组件显示底部bar
    this.$parent.isShowbar = true;
  },
};
</script>
<style scoped lang="scss">
.backTop {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: fixed;
  background: pink;
  right: 30px;
  bottom: 80px;
  z-index: 9999;
}
</style>
